<template>
    <el-dialog v-model="dialogFormVisible" title='新增仓库' width="500">
        <el-form :model="form" ref="formRef" :rules="rules" >
            <el-row :gutter="20">
                <el-form-item label="仓库名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off" />
                </el-form-item>
            </el-row>


            <el-row :gutter="20">
                <el-form-item label="仓管人员" :label-width="formLabelWidth" style="margin-top: 22px;">
                    <el-select v-model="form.staffId" placeholder="请选择" style="width: 200px;" filterable>
                        <el-option v-for="staff in warehouseManagerList" :key="staff.id" :label="staff.name"
                            :value="staff.id" />
                    </el-select>
                </el-form-item>
            </el-row>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="saveWarehouse" :loading="saving">
                    保存
                </el-button>
                <el-button @click="dialogFormVisible = false">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { ref, reactive, defineEmits, defineExpose, nextTick } from 'vue'

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const saving = ref(false)
const formRef = ref()
const form = reactive({
    name: '',
    staffId: '',
})

const rules = {
    name: [{ required: true, message: '请输入仓库名称', trigger: 'blur' }],
    staffId: [{ required: true, message: '请选择仓库', trigger: 'blur' }]
}


// 查询角色为仓管的员工
const warehouseManagerList = ref([])

const getStaffList = async () => {
    try {
        const res = await axios.get('/api/basic/warehouse/allWarehouseManager')
        if (res.data.code === 5200) {
            warehouseManagerList.value = res.data.warehouseManagerList
        } else {
            ElMessage.error('获取仓库员工列表失败')
        }
    } catch (error) {
        console.error('获取仓库员工失败:', error)
        ElMessage.error('加载失败')
    }
}

// 打开添加对话框
const openAddDialog = async () => {
    dialogFormVisible.value = true
    await nextTick() // 等待 DOM 更新
    await getStaffList() // 确保员工列表加载完成
    if (formRef.value) {
        formRef.value.resetFields()
    }
}

const saveWarehouse = async () => {
    saving.value = true
    try {
        const res = await axios.post('/api/basic/warehouse/addWarehouse', form)
        if (res.data.code === 5200) {
            ElMessage.success(res.data.msg)
            dialogFormVisible.value = false
            // 触发成功事件，让父组件重新获取数据
            emit('success')
        } else {
            ElMessage.error(res.data.msg)
        }
    } catch (error) {
        ElMessage.error(error.message)
    } finally {
        saving.value = false
    }
}

const emit = defineEmits(['success'])

// 暴露方法给父组件
defineExpose({
    openAddDialog
})

</script>